<template>
  <Modal
    :active="physicalFieldModalVueActive"
    transfer
    title="物理场CSV 导入"
    hide-mask
    draggable
    :width="650"
    :no-footer="true"
    @close="closeBtn"
  >
    <div>
      <div class="tableList">
        <table class="property-table">
          <tbody>
            <tr>
              <td class="label">
                <div style="width: 150px">对象</div>
              </td>
              <td class="value">值</td>
            </tr>
            <tr>
              <td class="label indent">名字</td>
              <td class="value">Field_1</td>
            </tr>
            <tr>
              <td class="label indent">标识</td>
              <td class="value">1</td>
            </tr>
            <tr>
              <td class="label indent">类型</td>
              <td class="value">Discrete</td>
            </tr>
            <tr>
              <td class="label indent">源</td>
              <td class="value">csv file</td>
            </tr>
            <tr>
              <td
                class="label indent"
                :class="{ 'selected-row': selectedRow === 'file' }"
                @click="selectRow('file')"
              >
                文件
              </td>
              <td class="value">
                <span v-if="selectedRow !== 'file'">{{ formData.file }}</span>
                <div v-else style="display: flex">
                  <Input v-model:value="formData.file" @click.stop></Input>
                  <Button>Open</Button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="label indent">坐标系</td>
              <td class="value">
                <RadioGroup>
                  <Radio
                    v-for="(item, index) in optionList"
                    :key="item"
                    :label="item"
                    v-model:value="formData.coordinateSystem"
                  >
                    <div class="radio_item">{{ item }}</div>
                  </Radio>
                </RadioGroup>
              </td>
            </tr>
            <tr>
              <td class="label">
                <span class="toggle" @click.stop="toggleImplementation">
                  <!-- {{ implementationExpanded ? "▼" : "▶" }} 实现 -->
                  <img
                    v-if="implementationExpanded"
                    src="../assets/downArrow.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                  <img
                    v-else
                    src="../assets/rightArrow.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                  实现
                </span>
              </td>
              <td class="value">
                <Checkbox v-model:checked="formData.implementation"> </Checkbox>
              </td>
            </tr>
            <template v-if="implementationExpanded">
              <tr>
                <td class="label indent2">接触面类型</td>
                <td class="value">Nodes</td>
              </tr>
              <tr>
                <td class="label indent2">场类型</td>
                <td class="value">Temperature</td>
              </tr>
              <tr>
                <td class="label indent2">差值</td>
                <td class="value">Linear</td>
              </tr>
              <tr>
                <td class="label indent2">搜索半径</td>
                <td class="value">0.0</td>
              </tr>
              <tr>
                <td class="label indent2">缩放</td>
                <td class="value">
                  <Checkbox v-model:checked="formData.scale"> </Checkbox>
                </td>
              </tr>
              <tr>
                <td class="label indent2">缩放因数</td>
                <td class="value">1</td>
              </tr>
              <tr>
                <td class="label indent2">节点</td>
                <td class="value">0 node(s)</td>
              </tr>
            </template>
            <tr>
              <td class="label indent">Apply</td>
              <td class="value foot-box">
                <Button @click="confirm">Apply</Button>
                <Button @click="alignmentBtn">Clear</Button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { Modal, Button, Input, RadioGroup, Radio, Checkbox } from "cax-ui";
import { useCoreStore, _global } from "@/UI/store";
import { storeToRefs } from "pinia";
const coreStore = useCoreStore();
const { physicalFieldModalVueActive } = storeToRefs(coreStore);
const optionList = ref(["Global System", "local"]);

// 表单数据
const formData = ref({
  objectValue: "值",
  name: "Field_1",
  id: "1",
  type: "Discrete",
  source: "csv file",
  file: "",
  coordinateSystem: "global",
  implementation: true,
  contactType: "Nodes",
  fieldType: "Temperature",
  interpolation: "Linear",
  searchRadius: 0.0,
  scale: true,
  scaleFactor: 1,
});

// 选中的行
const selectedRow = ref(null);
// 实现部分是否展开
const implementationExpanded = ref(true);

function selectRow(rowKey) {
  if (selectedRow.value === rowKey) {
    selectedRow.value = null;
  } else {
    selectedRow.value = rowKey;
  }
}

function toggleImplementation() {
  implementationExpanded.value = !implementationExpanded.value;
}

function confirm() {
  coreStore.setPhysicalFieldModalVueValue(formData.value);
  physicalFieldModalVueActive.value = false;
}

function closeBtn() {
  physicalFieldModalVueActive.value = false;
}

function alignmentBtn() {
  physicalFieldModalVueActive.value = false;
}
</script>
<style scoped>
.foot-box {
  width: 100%;
  height: 40px;
  text-align: right !important;
}

.tableList {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.property-table {
  width: 100%;
  border-collapse: collapse;
}

.property-table tr {
  border-bottom: 1px solid #f0f0f0;
}

.property-table td {
  padding: 8px 12px;
}

.selected-row {
  background-color: #e6f7ff;
}

.label {
  width: 200px;
  color: #333;
  font-weight: normal;
  text-align: left;
  border-right: 1px solid #f0f0f0;
}

.indent {
  padding-left: 20px !important;
}
.indent2 {
  padding-left: 40px !important;
}
.value {
  text-align: left;
}

.value input[type="text"],
.value input[type="number"],
.value select {
  width: 100%;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.section {
  background-color: #f9f9f9;
}

.toggle {
  cursor: pointer;
  user-select: none;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #f9f9f9;
  border-top: 1px solid #e8e8e8;
}

.right-buttons {
  display: flex;
  gap: 8px;
}

.action-button {
  padding: 4px 12px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
}

.action-button:hover {
  border-color: #1890ff;
  color: #1890ff;
}
.imgStyle {
  width: 20px;
  height: 12px;
}
</style>
